<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>appnet websocket chatroom</title>

<link href="resource/css/bootstrap.css" rel="stylesheet">
<link href="resource/css/chat.css" rel="stylesheet">

<script src="resource/js/jquery.js" ></script>
<script src="resource/js/jquery.json.js"  ></script>
<script src="resource/js/chat.js"  charset="utf-8"></script>

<style>
body {
	padding-top: 60px;
}
</style>
<!-- <link href="/static/css/bootstrap-responsive.css" rel="stylesheet"> -->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


</head>
<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="brand" href="/">Appnet Chatting--技术测试项目</a>
			
				<div class="nav-collapse">
					<!--             <ul class="nav">
		  <li class="active"><a href="/">Lobby</a></li>
		</ul> -->
					<ul class="nav pull-right">

					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">
		<div class="container"  >
			<div class="row" >
			
				<!--主聊天区-->
				<div id="chat-column" class="span8">
				
					<!-- 
					<div id="chat-tool" style="height:100px;border:0px solid #ccc;">
						个人资料区
					</div>
					-->
					
					<!--消息显示区-->
					<div id="chat-messages"  style="border:0px solid #ccc;">
						<div class="message-container">
						</div>
					</div>
					
					
					
					<!--工具栏区-->
					<div id="chat-tool" style="padding-left:10px;height:30px;border:0px solid #ccc;background-color:#F5F5F5;">
						<select id="userlist" style="float: left; width: 90px;">
							<option value=0>所有人</option>
						</select>
						
						<!-- 聊天表情 -->
						<a  onclick="toggleFace()" id="chat_face" class="chat_face" >
							<img src="resource/img/face/15.gif" />
						</a>
					</div>
					<!--工具栏结束-->


					<!--聊天表情弹出层-->
					<div id="show_face" class="show_face" >
					</div>
					<!--聊天表情弹出层结束-->
					

					<!--发送消息区-->
					<div id="input-msg" style="height:110px;border:0px solid #ccc;">
						<form id="msgform" class="form-horizontal post-form">
							<div class="input-append" >
									<textarea id="msg_content" style="width:500px;height:80px;" rows="3" cols="500" contentEditable="true"></textarea>
									<img style="width:80px;height:90px;"  onclick="sendMsg()" style="" src="resource/img/button.gif" />
							</div>
						</form>
					</div>
				</div>
				<!--主聊天区结束-->
				
				
				<!--左边栏-->
				
				<div id="left-column" class="span3">
					<div class="well c-sidebar-nav">
						<ul class="nav nav-list">
							<li class="nav-header">Chats</li>
							<li class="active"><a href="javascript:void(0)">In Room</a>
							</li>
						</ul>
					   <ul id="left-userlist">
					   </ul>
					   <div style="clear: both"></div>
					</div>
				</div>		
				
			</div>
		</div>
		<!-- /container -->
		<div id="msg-template" style="display: none">
			<div class="message-container">
				<div class="userpic"></div>
				<div class="message">
					<span class="user"></span>
					<div class="cloud cloudText">
						<div style="" class="cloudPannel">
							<div class="sendStatus"></div>
							<div class="cloudBody">
								<div class="content" ></div>
							</div>
							<div class="cloudArrow "></div>
						</div>
					</div>
				</div>
				<div class="msg-time"></div>
			</div>
		</div>
		<!-- / -->
	</div>
</body>
</html>

